<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <!-- 1.安装 vue-router 路由模块 -->
    <script src="./lib/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>

        <router-view></router-view>
    </div>
</body>
<script>
    var login = {
        template: '<h1>登录</h1>'
    }

    var register = {
        template: '<h1>注册</h1>'
    }


    // 2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
    // 在new路由对象的时候,可以为构造函数传递一个配置对象
    var routerObject = new VueRouter({
        // route // 这个配置对象中的route表示【路由匹配规则】的意思
        routes: [// 路由匹配规则
            // 每个路由规则，都是一个对象，这个规则对象身上有两个必要的属性：
            // 属性1：path，表示监听哪一个路由链接地址；
            // 属性2：components，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件。
            // 注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称。
            {
                path: "/login",
                component: login
            },
            {
                path: "/register",
                component: register
            }
        ]
    });


    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        // 3.将路由规则对象注册到vm实例上用来监听URL变化，然后展示对象组件。
        router: routerObject
    });
</script>

</html>